<template>
  <Dialog :appDialog="appDialog">
    <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()" @radioChange="handleCurrentChange"></ZwTable>
  </Dialog>
</template>

<script setup lang="tsx">
  import { getSetionId } from '@/utils/utils'
  import { DFormat, getSuffixIcon } from '@/utils/utils'

  import { ref, reactive, onMounted, nextTick, withDefaults, defineProps, watch } from 'vue'
  import { useStore } from '@/store'
  import Dialog from '@/components/Dialog.vue'
  import { useRouter } from 'vue-router'
  import { channelFriendList } from '@/api/channel/qwbase'
  import { ElMessage, ElImage, ElIcon, ElButton, ElBadge, ElTooltip } from 'element-plus'
  import { deepCopy } from '@/utils/helper'
  import ZwTable from '@/components/zw/table/Table'

  const emit = defineEmits(['submit'])
  const router = useRouter()
  const store = useStore()
  const tableData = ref([]) //已有欢迎语数据
  const seleItem = ref({ id: '' }) // 选中的欢迎语数据
  const tableRef = ref<any>(null)
  // 选择已有素材取消
  const cancelHandel = () => {
    appDialog.visible = false
  }
  // 选择已有素材确认
  const submitHandel = () => {
    if (seleItem.value.id) {
      emit('submit', seleItem.value)
      cancelHandel()
    } else {
      ElMessage.error('请选择欢迎语')
    }
  }
  const getRowKey = (row: any) => {
    return row.id
  }
  const tableOption = [
    {
      width: 55,
      fixed: 'left',
      isRadio: true
    },
    {
      prop: 'content',
      label: '欢迎语',
      width: 220,
      showOverflowTooltip: true
    },
    {
      prop: 'welcome_friend_attachment',
      label: '素材',
      width: 300,
      render({ row }) {
        return (
          <>
          
          <div class="contentBox" vShow={row.welcome_friend_attachment.length}>
            {
              row.welcome_friend_attachment.map((v:any) => {
                return (
                  <div >
                    <ElTooltip vShow={v.type == 1} content={v.media_file?.name + ' ' + (v.media_file?.size / 1024 / 1024).toFixed(2) + 'M'} placement="top" effect="light" >
                        <ElImage vShow={v.type == 1} class="wel_content_file_item" src={v.media_file?.absolute_url || '/static/file/pic.png'} preview-src-list={[v.media_file?.absolute_url]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 2} content={v.media_file?.name} placement="top" effect="light" >
                      <div class="pay-item">
                        <div class="play"></div>
                        <ElImage vShow={v.type == 2 && v.media_file?.absolute_url} class="wel_content_file_item" src={`${v.media_file?.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast` || '/static/file/mov.png'} preview-src-list={[`${v.media_file?.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                        <ElImage vShow={v.type == 2 && !v.media_file?.absolute_url} class="wel_content_file_item" src={'/static/file/mov.png'} preview-src-list={[v.media_file?.absolute_url]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                      </div>
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 3} content={v.link_title} placement="top" effect="light" >
                      <img vShow={v.type == 3} class="wel_content_file_item" src="/static/file/link.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 4} content={v.media_file?.name} placement="top" effect="light" >
                      <img vShow={v.type == 4} class="wel_content_file_item" src="/static/file/mp3.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 5} content={v.media_file?.name} placement="top" effect="light" >
                      <img vShow={v.type == 5} class="wel_content_file_item" src={getSuffixIcon(v.media_file?.name)} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 8} content={v.link_title} placement="top" effect="light" >
                      <ElImage vShow={v.type == 8 && v.link_share_image} class="wel_content_file_item" src={v.link_share_image} preview-src-list={[v.media_file?.absolute_url]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                        <ElImage vShow={v.type == 8 && !v.link_share_image} class="wel_content_file_item" src={'/static/file/wbgg.png'} preview-src-list={[v.link_share_image]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 9} content={v.collect_form?.title} placement="top" effect="light" >
                      <ElImage vShow={v.type == 9 && v.collect_form?.cover_image} class="wel_content_file_item" src={ v.collect_form?.cover_image } preview-src-list={[v.collect_form?.cover_image]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                      <ElImage vShow={v.type == 9 && !v.collect_form?.cover_image} class="wel_content_file_item" src={'/static/file/wbgg.png'}  initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 7} content={v.retail_product?.product_name} placement="top" effect="light" >
                      <img vShow={v.type == 7} class="wel_content_file_item" src={v.retail_product?.cover || '/static/file/mp3.png'} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 10} content={v.official_article?.content} placement="top" effect="light" >
                      <ElImage vShow={v.type == 10 && v.official_article?.cover} class="wel_content_file_item" src={ v.official_article?.cover } preview-src-list={[v.official_article?.cover]} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                      <ElImage vShow={v.type == 10 && !v.official_article?.cover} class="wel_content_file_item" src={'/static/file/wbgg.png'}  initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" ></ElImage>
                    </ElTooltip>
                    <ElTooltip vShow={v.type == 11} content={v.miniprogram?.title} placement="top" effect="light" >
                      <img vShow={v.type == 11} class="wel_content_file_item" src={v.miniprogram?.image_url} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                    </ElTooltip>
                  </div>
                 
                )
              })
            }
          </div>
          <p vShow={row.welcome_friend_attachment.length == 0}>--</p>
          </>
        )
      }
    },
    {
      prop: 'send_times',
      label: '消息数量',
      width: 120,
    },
    {
      prop: 'depart',
      label: '生效部门、员工',
      width: 150,
      render({row}) {
        return (
          <div class="depart_main">
            { row.department > 0 ? getSetionId('name', row.department).join('、') : ' ' }
            { row.work_user.length > 0 ? getSetionId('name', row.work_user).join('、') : '' }
          </div>
        )
      }
    },
    {
      prop: 'user_name',
      label: '创建人',
      width: 120,
    },
    {
      prop: 'user_local_department',
      label: '所在部门',
      width: 150,
      render({row}) {
        return (
          <span>{ row.user_local_department && row.user_local_department.length > 0 ? getSetionId('name', row.user_local_department).join('、') : '--' }</span>
        )
      }
    },
    {
      prop: 'created_at',
      label: '创建时间',
      width: 180,
    },
    {
      prop: 'updated_at',
      label: '修改时间',
      width: 180,
    }
  ]
  const defaultParams = reactive({
    page: 1,
    limit: 15
  })
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return channelFriendList
  }

  // 单选欢迎语
  const handleCurrentChange = (selection: any) => {
    seleItem.value = selection
  }
  const appDialog = reactive<any>({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })
  // 获取已有素材文件列表
  const getChannelFriendList = (data?: any) => {
    channelFriendList({
      page: 1,
      page_size: data?.page_size || 15,
      ...data
    }).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  watch(
    () => appDialog.visible,
    (v) => {
      if (v) {
        getChannelFriendList()
      }
    }
  )
  defineExpose({
    appDialog
  })
</script>

<style lang="scss" scoped>
  :deep(.contentBox) {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: repeat(5, 40px);
    align-items: center;
  }
</style>
